<style>
* {
   margin: 0px;
   padding: 0px;
}

.col-marleft {
   display: flex;
   justify-content: space-around;
}

.head_search {
   margin-bottom: 10px;
}
</style>
<template>
   <!-- 头部搜索 -->
   <div class="head_search">
      <el-row>
         <el-col :span="6">
            <div class="text">
               <el-input v-model="search" placeholder="请输入症状名称" />
            </div>
         </el-col>
         <el-col :span="10">
            <!-- 搜索 -->
            <el-button type="primary" plain style="margin-left: 10px;" @click="getDataByName">
               <el-icon>
                  <Search />
               </el-icon>搜索
            </el-button>
            <!-- 打开添加弹窗 -->
            <el-button type="info" @click="Add" plain>
               <el-icon>
                  <Plus />
               </el-icon>添加
            </el-button>
         </el-col>
      </el-row>
   </div>

   <!-- 表格 -->
   <!-- 设置表格中的语言配置为中文 -->
   <el-config-provider :locale="zhCn">
      <el-table :data="tableData" style="width: 100%;" stripe @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" />
         <el-table-column label="ID" prop="id" />
         <el-table-column label="适用性别" prop="sex" :formatter="formatGender"/>
         <el-table-column label="身体部位" prop="partId" />
         <el-table-column label="症状" prop="symptom" />
         <el-table-column label="操作">
            <template #default="scope">
               <el-button size="small" type="success">编辑伴随症状</el-button>
               <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
               <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
         </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="demo-pagination-block" style="margin-top: 10px;">
         <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 50, 100]"
            :background="background" layout="total, sizes, prev, pager, next, jumper" :total="totalNum"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
   </el-config-provider>

   <!-- 添加/编辑Form -->
   <el-dialog v-model="dialogFormVisible" title="添加/修改" width="40%" :before-close="handleClose">
      <el-form :model="form" :label-position="labelPosition" class="demo-form-inline">
         <!-- 选择使用性别-->
         <el-row class="col-marleft">
            <el-col :span="15">
               <el-form-item label="适用性别">
                  <el-select v-model="form.sex" placeholder="请选择">
                     <el-option label="女" value="0" />
                     <el-option label="男" value="1" />
                     <el-option label="全部" value="2" />
                  </el-select>
               </el-form-item>
            </el-col>
         </el-row>
         <!-- 选择身体部位 -->
         <el-row class="col-marleft">
            <el-col :span="15">
               <el-form-item label="身体部位">
                  <el-select v-model="form.partId" placeholder="请选择">
                     <el-option v-for="item in list" :key="item.id" :label="item.bodypart" :value="item.id" />
                  </el-select>
               </el-form-item>
            </el-col>
         </el-row>
         <!-- 输入症状-->
         <el-row class="col-marleft">
            <el-col :span="15">
               <el-form-item label="症状:">
                  <el-input v-model="form.symptom" placeholder="请输入症状" style="width: 100%;" />
                  <el-input v-model="form.id" type="hidden" />
               </el-form-item>
            </el-col>
         </el-row>
      </el-form>
      <template #footer>
         <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="btnSave">
               提交
            </el-button>
         </span>
      </template>
   </el-dialog>
</template>

<script setup >
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox, ElConfigProvider } from 'element-plus'
// 引入中文包
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import axios from 'axios'

const router = useRouter()

// 表格数据
const tableData = ref([])
onMounted(() => {
   fetchData()
   binTable(pageSize.value, 1, search.value)
})

//将获取到的性别字符转换为文字展示
function formatGender(row){
   return row.sex == 1 ? '男' : row.sex == 2 ? '女' : '全部'
}

//与输入框绑定，获取模糊查询的值
const search = ref('')
//点击查询按钮，调用binTable方法
function getDataByName() {
   binTable(pageSize.value, 1, search.value)
}

//接收查询身体部位的值
const list = ref([])
//定义一个方法，用于获取身体部位的值，用以绑定下拉框
const fetchData = () => {
   axios.get('/api/business/Bodyparts/alllist').then(res => {
      list.value = res.data.data
      console.log(list.value)
   })
}

//获取添加/编辑表单的值
var form = ref({
   id: 0,
   partId: 0,
   sex: "2",
   symptom: ""
})
//定义弹出层的状态
var dialogFormVisible = ref(false)
//修改方法
var handleEdit = (index, row) => {
   console.log(row)
   dialogFormVisible.value = true
   //将当前行的数据赋值给表单
   form.value = row
}
//添加方法
function Add() {
   dialogFormVisible.value = true
   form.value = {
      id: 0,
      partId: 0,
      sex: "2",
      symptom: ""
   }
}

//表单保存，进行添加/编辑操作
function btnSave() {
   console.log(form.value);
   axios({
      url: '/api/business/Symptoms',
      method: form.value.id === 0 ? 'post' : 'put',
      // 请求头
      headers: {
         'content-type': 'application/json'
      },
      data: form.value
   }).then((res) => {
      if (res.data.code == 200) {
         ElMessage({
            message: '保存成功',
            type: 'success',
         });
         // 关闭弹出层
         dialogFormVisible.value = false;
         form.value.id = 0
         //刷新表格
         binTable(pageSize.value, 1, search.value);
      } else {
         ElMessage({
            message: '保存失败',
            type: 'warning',
         })
      }
   })
}

//删除方法，通过id删除，可多选删除
var handleDelete = (index, row) => {
   ElMessageBox.confirm(
      '确定要删除吗?',
      'Warning',
      {
         confirmButtonText: '确认',
         cancelButtonText: '取消',
         type: 'warning',
      }
   ).then(() => {
      axios.delete(`/api/business/Symptoms/` + row.id).then(function (res) {
         if (res.data.code == 200) {
            ElMessage({
               type: 'success',
               message: "删除成功"
            })
            binTable(pageSize.value, 1, search.value);
         } else {
            ElMessage({
               type: 'warning',
               message: "删除失败" + res.data.msg
            })
         }
      }).catch(() => {
         ElMessage({
            type: 'warning',
            message: "删除失败!"
         })
      })
   }).catch(() => {
      ElMessage({
         type: 'info',
         message: '取消删除',
      })
   })
}

// 定义函数binTable，用于获取数据，并进行分页
function binTable(page, pageNum, strName) {
   axios.get(`/api/business/Symptoms/list?PageNum=${pageNum}&PageSize=${page}&TotalNum=16&TotalPageNum=0&symptom=${strName}`)
      .then(function (response) {
         tableData.value = response.data.data.result;
         currentPage.value = response.data.data.pageIndex;
         totalNum.value = response.data.data.totalCount;
         console.log(response.data.data.result)
      })
}

//定义获取到的数据总行数
const totalNum = ref()
// 定义当前页数和每页显示条数的变量
const currentPage = ref(1)
const pageSize = ref(5)
// 定义背景颜色变量
const background = ref(true)
// 定义每页显示条数改变事件
const handleSizeChange = (val) => {
   binTable(val, currentPage.value, search.value)
}
// 定义当前页数改变事件
const handleCurrentChange = (val) => {
   binTable(pageSize.value, val, search.value)
}
</script>